<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>疫苗接种登记记录查询</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="../js/vue.js"></script>
  <script src="../js/axios-0.18.0.js"></script>
  <script src="../element-ui/lib/index.js"></script>
  <link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div id="div">
  <b style="color: red; font-size: 20px;">疫苗接种登记记录查询</b>
  <el-table :data="tableData">
    <el-table-column align="center" type=index label="序号" prop="vacId" width="100px"></el-table-column>
    <el-table-column align="center" prop="userInfo.userNumber" label="学号/工号"></el-table-column>
    <el-table-column align="center" prop="username" label="姓名"></el-table-column>
    <el-table-column align="center" prop="identification" label="身份证号码" width="200"></el-table-column>
    <el-table-column align="center" prop="vaccineName" label="疫苗名称" width="200"></el-table-column>
    <el-table-column align="center" prop="time" label="接种时间"></el-table-column>
    <el-table-column align="center" prop="frequency" label="针剂次"></el-table-column>
    <el-table-column align="center" prop="factory" label="疫苗生产企业"></el-table-column>
  </el-table>
</div>

<script>
  new Vue({
    el: "#div",
    data: {
      tableData:[],
      user: {},
      userInfo: {}
    },
    methods: {
      //分页查询功能
      selectByPage() {
        //向后台发送请求
        let param = "action=toShowVaccination&identification=" + this.userInfo.identification;
        axios.post("/EpidemicControlSystem_war_exploded/VaccinationServlet", param)
                .then(response => {
                  //将查询出的数据赋值给tableData
                  this.tableData = response.data.vaccinations;
                  console.log(this.tableData)
                });
      },

      getUser()  {
        axios.post("/EpidemicControlSystem_war_exploded/UserServlet", "action=user")
                .then(res => {
                  this.user = res.data.loginUser;
                  this.userInfo = res.data.loginUserInfo;
                  //调用分页查询功能
                  this.selectByPage();
                });
      }
    },
    created() {
      this.getUser();
    }
  });
</script>
</body>
</html>